<template>
  <div class="add-container clearfix">
    <div class="add-head">
      <h3 style="width: 100%; text-align: center; padding: 10px 0">新增入库单</h3>
      <div class="add-text">素金类商品录入界面</div>
      <div class="myCkectbox">
        <div style="float: left">常用信息 :</div>
        <el-checkbox-group class="_ckeckbox" v-model="checkList">
          <el-checkbox label="商品编码输入"></el-checkbox>
          <el-checkbox label="标签价重算"></el-checkbox>
          <el-checkbox label="成本价重算"></el-checkbox>
          <el-checkbox label="自动取石价"></el-checkbox>
          <el-checkbox label="保存并新建时保存金、石款"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="addFrom-btn">
        <el-button class="btn" type="success" @click="saveAndCreate">保存并新建</el-button>
        <el-button class="btn" type="primary" @click="saveAndQuit">保存并退出</el-button>
        <el-button class="btn" type="info" @click="quit">退出</el-button>
      </div>
    </div>
    <div class="addFrom1" ref="addFrom1" :model="addFromRule">
      <el-form>
        <el-form-item
          v-for="item in selectList1"
          :label="item.title"
          label-width="80px"
          :key="item.id"
          class="title"
        >
          <el-select v-if="item.isSelect" size="mini" v-model="item.value">
            <el-option
              v-for="(info, index) in item.children"
              :key="index"
              :label="info"
              :value="info"
            ></el-option>
          </el-select>
          <el-input size="mini" v-else v-model="item.value" style="width=230px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 10px; color: #000; font-weight: 600">成本价格：</div>
    </div>
    <div class="addFrom2">
      <div class="addFrom2-left">
        <span style="margin-left: 10px">成本计价:</span>
        <el-select class="from2-select" size="mini" v-model="costValuation">
          <el-option label="重量" value="重量"></el-option>
          <el-option label="数量" value="数量"></el-option>
        </el-select>
      </div>
      <el-form>
        <el-form-item
          v-for="item in selectList2"
          :label="item.title"
          label-width="110px"
          :key="item.id"
          class="title"
        >
          <el-select v-if="item.isSelect" size="mini" v-model="item.value">
            <el-option
              v-for="(info, index) in item.children"
              :key="index"
              :label="info"
              :value="info"
            ></el-option>
          </el-select>
          <el-input size="mini" v-else v-model="item.value" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 10px; color: #000; font-weight: 600">销售价格：</div>
    </div>
    <div class="addFrom3">
      <div class="addFrom3-left">
        <span style="margin-left: 10px">销售计价:</span>
        <el-select class="from3-select" size="mini" v-model="sellCostValuation">
          <el-option label="重量" value="重量"></el-option>
          <el-option label="数量" value="数量"></el-option>
        </el-select>
      </div>
      <el-form>
        <el-form-item
          v-for="item in selectList3"
          :label="item.title"
          label-width="110px"
          :key="item.id"
          class="title"
        >
          <el-select v-if="item.isSelect" size="mini" style="width: 150px" v-model="item.value">
            <el-option
              v-for="(info, index) in item.children"
              :key="index"
              :label="info"
              :value="info"
            ></el-option>
          </el-select>
          <el-input size="mini" v-else v-model="item.value" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 10px; color: #000; font-weight: 600">其他属性：</div>
    </div>
    <div class="addFrom4">
      <el-form>
        <el-form-item
          v-for="item in selectList4"
          :label="item.title"
          label-width="80px"
          :key="item.id"
          class="title"
        >
          <el-select v-if="item.isSelect" size="mini" v-model="item.value">
            <el-option
              v-for="(info, index) in item.children"
              :key="index"
              :label="info"
              :value="info"
            ></el-option>
          </el-select>
          <el-input size="mini" v-else v-model="item.value" style="width=230px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isshowAddGoodsFrom"],
  data() {
    return {
      costValuation: "", // 成本计价
      sellCostValuation: "", // 销售计价
      goodsInfo: [],
      checkList: [],
      selectList1: [
        {
          id: 1,
          isSelect: false,
          title: "来源:",
          type: "source"
        },
        {
          id: 2,
          isSelect: false,
          title: "供应商:",
          type: "provider"
        },
        {
          id: 3,
          isSelect: false,
          title: "商品编码:",
          type: "goodsNum"
        },
        {
          id: 4,
          isSelect: false,
          title: "模具号:",
          type: "modeNum"
        },
        {
          id: 5,
          isSelect: false,
          title: "款号:",
          type: "itemNum"
        },
        {
          id: 6,
          isSelect: false,
          title: "电商款号:",
          type: "netNum",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 7,
          isSelect: false,
          title: "证书号1:",
          type: "certNum1"
        },
        {
          id: 8,
          isSelect: false,
          title: "证书号2:",
          type: "certNum2"
        },
        {
          id: 9,
          isSelect: false,
          title: "品牌:",
          type: "brand",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 10,
          isSelect: true,
          title: "含金量:",
          type: "goldContent",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 11,
          isSelect: false,
          title: "别名1:",
          type: "otherName1"
        },
        {
          id: 12,
          isSelect: false,
          title: "别名2:",
          type: "otherName2"
        },
        {
          id: 13,
          isSelect: true,
          title: "成色:",
          type: "quality",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 14,
          isSelect: true,
          title: "属性:",
          type: "attribute",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 15,
          isSelect: true,
          title: "石料:",
          type: "stone",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 16,
          isSelect: true,
          title: "款式:",
          type: "style",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 17,
          isSelect: false,
          title: "手寸:",
          type: "handleSize"
        },
        {
          id: 18,
          isSelect: false,
          title: "规格:",
          type: "size"
        }
      ],
      addFromRule: {
        source: "",
        provider: "",
        goodsNum: "",
        modeNum: "",
        itemNum: "",
        netNum: "",
        certNum1: "",
        certNum2: "",
        brand: "",
        goldContent: "",
        otherName1: "",
        otherName2: "",
        quality: "",
        stone: "",
        style: "",
        handleSize: "",
        size: ""
      },
      selectList2: [
        {
          id: 1,
          isSelect: false,
          title: "单件重:",
          value: ""
        },
        {
          id: 2,
          isSelect: false,
          title: "数量:",
          value: ""
        },
        {
          id: 3,
          isSelect: false,
          title: "重量:",
          value: ""
        },
        {
          id: 4,
          isSelect: false,
          title: "工费:",
          value: ""
        },
        {
          id: 5,
          isSelect: false,
          title: "成本附加费:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 6,
          isSelect: false,
          title: "料价:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 7,
          isSelect: false,
          title: "成本单价:",
          value: "",
          children: ["素金类", "镶嵌类", "其他类"]
        },
        {
          id: 8,
          isSelect: false,
          title: "成本:",
          value: "",
          children: ["北京总部", "上海分公司"]
        },
        {
          id: 9,
          isSelect: false,
          title: "真实料价:",
          value: "",
          children: ["wqw"]
        },
        {
          id: 10,
          isSelect: false,
          title: "真实成本价:",
          value: "",
          children: ["北京总部", "上海分公司"]
        },
        {
          id: 11,
          isSelect: false,
          title: "真实成本:",
          value: ""
        }
      ],
      selectList3: [
        {
          id: 1,
          isSelect: true,
          title: "分类1:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 2,
          isSelect: true,
          title: "分类2:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 3,
          isSelect: true,
          title: "分类3:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 4,
          isSelect: true,
          title: "提成分类:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 5,
          isSelect: true,
          title: "系列名称:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 6,
          isSelect: false,
          title: "摘要:",
          value: ""
        }
      ],
      selectList4: [
        {
          id: 1,
          isSelect: true,
          title: "分类1:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 2,
          isSelect: true,
          title: "分类2:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 3,
          isSelect: true,
          title: "分类3:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 4,
          isSelect: true,
          title: "提成分类:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 5,
          isSelect: true,
          title: "系列名称:",
          value: "",
          children: ["供应商1", "供应商2"]
        },
        {
          id: 6,
          isSelect: false,
          title: "摘要:",
          value: ""
        }
      ]
    };
  },
  created() {},
  methods: {
    saveAndCreate() {
      this.getInputBoxInfo(this.selectList1);
      this.getInputBoxInfo(this.selectList2);
      this.getInputBoxInfo(this.selectList3);
      this.getInputBoxInfo(this.selectList4);
      console.log(this.goodsInfo);
      this.clearInputBoxInfo(this.selectList1);
      this.clearInputBoxInfo(this.selectList2);
      this.clearInputBoxInfo(this.selectList3);
      this.clearInputBoxInfo(this.selectList4);
      this.goodsInfo = [];
    },
    saveAndQuit() {
      this.getInputBoxInfo(this.selectList1);
      this.getInputBoxInfo(this.selectList2);
      this.getInputBoxInfo(this.selectList3);
      this.getInputBoxInfo(this.selectList4);
      console.log(this.goodsInfo);
      this.clearInputBoxInfo(this.selectList1);
      this.clearInputBoxInfo(this.selectList2);
      this.clearInputBoxInfo(this.selectList3);
      this.clearInputBoxInfo(this.selectList4);
      this.$emit("closeAddForm");
      this.goodsInfo = [];
    },
    quit() {
      this.clearInputBoxInfo(this.selectList1);
      this.clearInputBoxInfo(this.selectList2);
      this.clearInputBoxInfo(this.selectList3);
      this.clearInputBoxInfo(this.selectList4);
      this.$emit("closeAddForm");
    },
    // 获取表格数据
    getInputBoxInfo(arr) {
      arr.forEach(item => {
        this.goodsInfo.push(item.value);
      });
    },
    // 清楚表格数据
    clearInputBoxInfo(arr) {
      arr.forEach(item => {
        item.value = "";
      });
    }
  }
};
</script>

<style scoped lang="scss">
.add-container {
  border: 1px solid #aaa;
  padding: 10px 0;
  .add-head {
    height: 80px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    .add-text {
      position: absolute;
      top: 30px;
      left: 20px;
      color: #ccc;
    }
    .myCkectbox {
      position: absolute;
      top: 60px;
      left: 20px;
      ._ckeckbox {
        float: left;
        margin-left: 10px;
      }
    }
    .addFrom-btn {
      position: absolute;
      right: 0;
      margin-right: 10px;
      .btn {
        width: 100px;
        padding: 0;
        height: 30px;
      }
    }
  }
  .addFrom1 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    .title {
      margin-bottom: 8px;
    }
  }
  .addFrom2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    .addFrom2-left {
      float: left;
      margin-top: 8px;
      width: 210px;
      height: 150px;
      .from2-select {
        display: inline-block;
        width: 100px;
        margin-left: 4px;
      }
    }
  }
  .addFrom3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    .addFrom3-left {
      float: left;
      margin-top: 8px;
      width: 210px;
      height: 80px;
      .from3-select {
        display: inline-block;
        width: 100px;
        margin-left: 4px;
      }
    }
  }
}
</style>